<template>
    <div class="commodity">
        <div class="header">
            <span @click="goBack()">
                <van-icon name="arrow-left" />
            </span>
            <ul>
                <router-link tag="li" replace :to="{path:'/commodity/index',query:{gid:gid}}">商品</router-link>
                <router-link tag="li" replace :to="{path:'/commodity/info',query:{gid:gid}}">详情</router-link>
                <router-link tag="li" replace :to="{path:'/commodity/comment',query:{gid:gid}}">评论</router-link>
            </ul>
            <span @click="goToCar()">
                <van-icon name="cart-o" />
            </span>
        </div>
        <section>
            <router-view></router-view>
        </section>
    </div>
</template>
<script>
    export default {
        name:'Commdity',
        data(){
            return{
                goodsCommodity:[],
                gid:""
            }
        },
        created() {
            this.gid = Number(this.$route.query.gid)
        },
        methods:{
            goBack(){
                history.go(-1)
            },
            goToCar(){
                this.$router.push('/shopcar')
            }
        }

    }
</script>
<style lang="less" scoped>
    .commodity{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #efefef;
        .header{
            width: 100%;
            height: 1rem;
            font-size: 0.4rem;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background: white;
            span{
                width: 1rem;
                height: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            ul{
                flex: 1;
                text-align: center;
                display: flex;
                li{
                    flex: 1;
                    line-height: 1rem;
                    font-size: 0.32rem;
                }

            }
        }
        .router-link-active{
            border-bottom: solid 2px #FDA208;
        }
        section{
            flex: 1;
            margin-top: 1rem;
            overflow: auto;
        }
    }
</style>